<!DOCTYPE html>
<html lang="en">
  <head>
    <title>three.js webgl - geometry - cube</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <link
      type="text/css"
      rel="stylesheet"
      href="https://threejs.org/main.css"
    />
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <script type="importmap">
      {
        "imports": {
          "three": "https://threejs.org/build/three.module.js",
          "three/addons/": "https://threejs.org/examples/jsm/"
        }
      }
    </script>

    <script type="module">
      import * as THREE from "three";
      let camera, scene, renderer;
      let mesh;

      init();

      function init() {
        // 相机
        camera = new THREE.PerspectiveCamera(
          70,
          window.innerWidth / window.innerHeight,
          0.1,
          100
        );
        camera.position.z = 2;

        // 场景
        scene = new THREE.Scene();
        // 相机参考线
        const cameraHelper = new THREE.CameraHelper(camera);
        scene.add(cameraHelper);

        //几何
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });

        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        // 渲染器
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setAnimationLoop(animate);
        document.body.appendChild(renderer.domElement);

        //

        window.addEventListener("resize", onWindowResize);
      }

      function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);
      }

      function animate() {
        // mesh.rotation.x += 0.005;
        // mesh.rotation.y += 0.01;

        renderer.render(scene, camera);
      }
    </script>
  </body>
</html>
